<template>
  <div class="breadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in routerList" :key="item.path">
        <span class="breadcrumb__text" v-if="index == routerList.length - 1">{{ item.meta.title }}</span>
        <router-link class="breadcrumb__text" :to="{ path: item.fullPath }" v-else>
          {{ item.meta.title }}
        </router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'BaseBreadcrumb',
  computed: {
    routerList() {
      return this.$store.state.routerList
    },
  },
}
</script>

<style lang="scss" scoped>
.breadcrumb {
  &__text {
    font-size: $f-s-12;
    color: #909399;
  }
}
.el-breadcrumb__inner.is-link:hover,
.el-breadcrumb__inner a:hover {
  color: #909399;
  text-decoration: none;
}
</style>
